<!DOCTYPE html>
<html>
<head>
    <title>Fresnel Diffraction Diagram</title>
</head>
<body>
<canvas id="physicsDiagram" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // --- Style and Font Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = 'bold 22px "Times New Roman", serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordinate Definitions ---
    const yCenter = 180;
    const xScreen = 120;
    const xP = 520;
    const rhoHeight = 50; // The visual vertical distance for ρ
    const y_ds = yCenter - rhoHeight;

    // --- Helper function for drawing dashed lines ---
    function drawDashedLine(x1, y1, x2, y2, dashLen = 12, gapLen = 9) {
        ctx.beginPath();
        ctx.setLineDash([dashLen, gapLen]);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line
    }

    // 1. Draw the Opaque Screen/Plane
    // These vertical lines represent the plane of the obstacle.
    ctx.beginPath();
    ctx.moveTo(xScreen, 60);
    ctx.lineTo(xScreen, yCenter - 80);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(xScreen, yCenter + 80);
    ctx.lineTo(xScreen, 300);
    ctx.stroke();

    // 2. Draw the Central Axis (from O to P)
    const originDotX = xScreen + 15; // The dot for 'O' is on the axis
    drawDashedLine(originDotX, yCenter, xP, yCenter);

    // 3. Draw Point P and the Origin Dot 'O'
    // Point P label
    ctx.fillText('P', xP + 25, yCenter);
    // Origin Dot at the center
    ctx.beginPath();
    ctx.arc(originDotX, yCenter, 3.5, 0, 2 * Math.PI);
    ctx.fill();

    // 4. Draw the Area Element 'ds'
    // It is represented by two short horizontal lines.
    const ds_x_center = xScreen + 40;
    ctx.save();
    ctx.lineWidth = 3;
    // Lower line for ds
    ctx.beginPath();
    ctx.moveTo(ds_x_center - 25, y_ds);
    ctx.lineTo(ds_x_center + 25, y_ds);
    ctx.stroke();
    // Upper, shorter line for ds
    ctx.beginPath();
    ctx.moveTo(ds_x_center - 20, y_ds - 10);
    ctx.lineTo(ds_x_center + 20, y_ds - 10);
    ctx.stroke();
    ctx.restore();
    // Label 'ds'
    ctx.fillText('ds', ds_x_center + 40, y_ds - 5);
    
    // 5. Draw Path 'r'
    // The path originates from the center of the element 'ds'.
    drawDashedLine(ds_x_center, y_ds - 5, xP, yCenter);

    // 6. Draw Labels for ρ, O, r, L
    // 'O' label for the origin point on the axis
    ctx.fillText('O', xScreen - 25, yCenter + 10);

    // Label ρ (rho) and its directional arrow
    const rho_arrow_x = xScreen - 25;
    ctx.fillText('ρ', rho_arrow_x, yCenter - rhoHeight - 15);
    // Arrow for ρ
    ctx.save();
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(rho_arrow_x, yCenter);
    ctx.lineTo(rho_arrow_x, yCenter - 35); // Arrow shaft
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(rho_arrow_x, yCenter - 35);
    ctx.lineTo(rho_arrow_x - 5, yCenter - 28);
    ctx.moveTo(rho_arrow_x, yCenter - 35);
    ctx.lineTo(rho_arrow_x + 5, yCenter - 28);
    ctx.stroke();
    ctx.restore();

    // Label r
    // Position it above the path 'r'
    const r_label_x = (ds_x_center + xP) * 0.5 + 10;
    const r_label_y = (y_ds + yCenter) * 0.5 - 25;
    ctx.fillText('r', r_label_x, r_label_y);

    // Label L
    // Position it below the central axis
    const L_label_x = (originDotX + xP) * 0.5 + 10;
    const L_label_y = yCenter + 25;
    ctx.fillText('L', L_label_x, L_label_y);

    // 7. Draw Figure Caption
    ctx.font = 'bold 24px "Times New Roman", serif';
    ctx.fillText('Fig. 2.31', 300, 360);

</script>
</body>
</html>